{{#if this.selectedImage}}
  {{#if (and this.requiresDivider this.device.isMobile)}}
    <div class="ui hidden divider"></div>
  {{/if}}
  {{#if this.isHeaderImage}}
    <div class="ui centered card" style="width:100%;height: auto;overflow: hidden;">
      {{#if this.uploadingImage}}
        <div class="ui active dimmer">
          <div class="ui text loader">{{t 'Image Uploading'}}</div>
        </div>
      {{/if}}
      <div class="image" style="width:100%;height: 250px;overflow: hidden;">
        <img src={{this.selectedImage}} alt="Selected image">
      </div>
      {{#if this.allowReCrop}}
        <div class="ui bottom attached mini buttons">
          <button type="button" class="ui teal button" {{action 'reCrop'}}>
            <i class="crop icon"></i>
            {{t 'Re-crop'}}
          </button>
        </div>
      {{/if}}
      <div class="ui bottom attached mini buttons">
        <button type="button" class="ui red button" {{action 'removeSelection'}}>
          <i class="trash icon"></i>
          {{if this.needsConfirmation 'Delete' 'Confirm Delete'}}
        </button>
      </div>
    </div>
  {{else}}
    <div class="ui centered card">
      {{#if this.uploadingImage}}
        <div class="ui active dimmer">
          <div class="ui text loader">{{t 'Image Uploading'}}</div>
        </div>
      {{/if}}
      <div class="image">
        <img src={{this.selectedImage}} alt="Selected image">
      </div>
      {{#if this.allowReCrop}}
        <div class="ui bottom attached mini buttons">
          <button type="button" class="ui teal button" {{action 'reCrop'}}>
            <i class="crop icon"></i>
            {{t 'Re-crop'}}
          </button>
        </div>
      {{/if}}
      <div class="ui bottom attached mini buttons">
        <button type="button" class="ui red button" {{action 'removeSelection'}}>
          <i class="trash icon"></i>
          {{if this.needsConfirmation 'Delete' 'Confirm Delete'}}
        </button>
      </div>
    </div>
  {{/if}} 
  <div class="ui center aligned text mb-8" style="margin-top:-5px">
    <span>{{this.imageText}}</span>
  </div>
{{else}}
  <Input
    @type="file"
    @id={{this.inputIdGenerated}}
    class="styled input"
    @accept="image/*"
    @name={{or @name 'image_upload'}}
    @change={{action "fileSelected"}} />
  <label for="{{this.inputIdGenerated}}">
    <div class="ui center aligned piled upload segment text muted">
      <i class="big {{@icon}} icon"></i>
      <br><br>
      {{this.hint}}<br>
      {{#if this.allowDragDrop}}
        <small>({{t 'click or drag-and-drop'}})</small>
      {{/if}}
    </div>
    <span class="text muted">
      {{#if this.helpText}}
        {{this.helpText}}<br>
      {{/if}}
      ({{t 'Not larger than'}} {{this.maxSize}})
    </span>
  </label>
{{/if}}
{{#if this.needsCropper}}
  <Modals::CropperModal
    @isOpen={{this.cropperModalIsShown}}
    @imgData={{this.imgData}}
    @onImageCrop={{action "imageCropped"}}
    @aspectRatio={{this.aspectRatio}} />
{{/if}}
